/**
 * Created by MingIr on 2017/1/18.
 * @author:bjzhang
 */

import React,{ Component } from 'react';
import {
    View,
    TextInput,
    Text,
    StyleSheet,
    TouchableHighlight,
    TouchableOpacity
} from 'react-native';
import PHead from '../module/header';
import Toast from 'react-native-root-toast';
import { common } from '../module/common';

export default class AddRedPacket extends Component{
    constructor(props){
        super(props);
        this.state = {
            price:0.00,
            message:'开心的一天，愿你也是～',
            isDisable:false,
        };
    }
    changePrice(tx){
        this.setState({
            price:parseFloat(tx) || 0.00
        });
    }
    changeMessage(tx){
        this.setState({
            message:tx || '开心的一天，愿你也是～'
        });
    }
    send(){
        let that = this;
        if(that.state.price && !isNaN(that.state.price)){
            that.setState({isDisable:true});
            common.getLocation(function(location){
                common.post(common.api.bag.redPacket,{
                             price:that.state.price,
                             message:that.state.mesage,...location
                }).then(res => {
                    Toast.show('发表成功', {
                            duration: Toast.durations.SHORT,
                            position: Toast.positions.BOTTOM,
                            onHidden: () => {
                                that.props.navigation.goBack();
                            }
                        }
                    );
                }).catch(err => {
                    Toast.show('发表失败', {
                            duration: Toast.durations.LONG,
                            position: Toast.positions.BOTTOM
                        }
                    );
                }).finally(suc => {
                    that.setState({ isDisable:false });
                });
            });
        }else{
            Toast.show('请输入埋藏的金额',{
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM,
            });
        }
    }
    close(){
        this.props.navigation.goBack();
    }
    render(){
        return(
            <View style={styles.container}>
                <PHead onRightEvent={this.close.bind(this)} title='留个红包' rightText='关闭'></PHead>
                <View style={styles.packetWrap}>
                    <View style={styles.priceInputWrap}>
                        <Text style={styles.priceFont}>金额</Text>
                        <TextInput
                            underlineColorAndroid='transparent'
                            placeholder='填写金额'
                            placeholderTextColor='rgba(176,178,194,1)'
                            keyboardType='numeric'
                            style={styles.priceInput} onChangeText={(text)=>this.changePrice(text)}></TextInput>
                        <Text style={styles.priceFont}>元</Text>
                    </View>
                    <View style={{ padding:20, paddingBottom:0,}}>
                        <TextInput
                            underlineColorAndroid='transparent'
                            keyboardType='default'
                            placeholder={this.state.message}
                            placeholderTextColor='#B0B2C2'
                            style={styles.priceFont} onChangeText={(text)=>this.changeMessage(text)}></TextInput>
                    </View>
                    <View style={styles.priceTxWrap}>
                        <Text style={styles.priceText}>¥</Text>
                        <Text style={styles.priceText}>{this.state.price.toFixed(2)}</Text>
                    </View>
                    <View>
                        <TouchableOpacity activeOpacity={.7} disabled={this.state.isDisable} activeOpat style={styles.payButton} onPress={this.send.bind(this)}>
                            <Text style={styles.payButtonText}>微信安全支付</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff',
        flexDirection:'column',
        justifyContent:'space-between',
    },
    packetWrap:{
        flex:1,
        backgroundColor:'#fff',
        flexDirection:'column',
        justifyContent:'flex-start',
        paddingLeft:15,
        paddingRight:15,
        paddingTop:21,
    },
    priceInputWrap:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        padding:20,
        paddingBottom:0,
    },
    priceInput:{
        flex:1,
        textAlign:'right',
        fontSize:17,
        color:'rgba(95,100,132,1)',
        padding:0,
        paddingRight:20,
        textAlignVertical:'center',
    },
    priceFont:{
        fontSize:17,
        color:'#5F6484',
    },
    priceText:{
        fontSize:36,
        color:'#5F6484',
    },
    payButton:{
        backgroundColor:'rgba(82,211,100,1)',
        paddingTop:14,
        paddingBottom:14,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    payButtonText:{
        color:'#FFFFFF',
        fontSize:18,
    },
    priceTxWrap:{
        padding:20,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
    },
});